<template>
	<view style="width:750rpx;height:100%">
		<!-- <image :src="img" mode=""></image> -->
		<canvas @click="preview" :style="[{width:width + 'px;',height:height+'px;'}]" canvas-id="firstCanvas"></canvas>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				img: "",
				width:100,
				height:100,
				isShowCav:true,
				mixImg:""
			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync();
			this.width = (res.windowWidth);
			this.height = (res.windowHeight)-30;
			this.loadData();
			
		},
		methods:{
			preview:function(){
				uni.previewImage({
					urls:[this.mixImg],
					current:[this.mixImg]
				})
			},
			loadData:function(){
				var that = this;
				uni.showLoading({
					title:"加载中"
				})
				that.$api.req({
					id:that.userInfo.id
				},"/member/getQrCode").then((res)=>{
					var d = res.data;
					if(d.success){
						var data = d.data;
						that.img = data.qrcode;
						var ctx = uni.createCanvasContext('firstCanvas');
						//背景图
						uni.getImageInfo({
							src:data.bckImage,
							success(res) {
								let left = that.width/2-60;
								let top = 100;
								let maxWh = 180;
								uni.getImageInfo({
									src:that.userInfo.headImage,
									success(res) {
										var avatarurl_width = 66;    //绘制的头像宽度
										var avatarurl_heigth = 66;  //绘制的头像高度
										var avatarurl_x = left-avatarurl_width-10;  //绘制的头像在画布上的位置
										var avatarurl_y = top-20;  //绘制的头像在画布上的位置
										ctx.save();
										ctx.beginPath(); //开始绘制
									
										//先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
									
										ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
									
										ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
									
										ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
										ctx.draw(true)
										ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
									}
								});
								ctx.drawImage(res.path,0,0,that.width,that.height)
								ctx.draw(true)
								ctx.setGlobalAlpha(1)//不透明
								ctx.setFillStyle(data.titleColor)//文字颜色：默认黑色
								ctx.setFontSize(16)//设置字体大小，默认10
								ctx.font = 'normal bold 14px sans-serif';
								let text = "我是："
								ctx.fillText(text, left, top);
								ctx.draw(true)
								ctx.setFillStyle(data.nameColor)//文字颜色：默认黑色
								ctx.setFontSize(22)//设置字体大小，默认10
								let text2 = that.userInfo.nickName||"";//昵称
								ctx.fillText(text2, left+40, top);
								ctx.draw(true)
								ctx.setFillStyle(data.titleColor)//文字颜色：默认黑色
								ctx.setFontSize(16)//设置字体大小，默认10
								let text3 = data.title;
								ctx.fillText(text3, left, top+30);
								ctx.draw(true)
								
								let text4 = data.titleTwo;
								ctx.fillText(text4, left+30, top+30+maxWh+100);
								let text5 = data.titleThree;
								ctx.fillText(text5, left+20, top+30+maxWh+100+30);
								ctx.draw(true)
								uni.downloadFile({
									url:that.img,
									success:function(res){
										console.log("res",res);
									}
								})
								uni.getImageInfo({
									src:that.img,
									success(res) {
										var w = res.width;
										var h = res.height;
										
										if(w && w>maxWh){
											w = maxWh;
										}
										if(h && h>maxWh){
											h = maxWh;
										}
										ctx.drawImage(res.path,left-20,top+80,w,h)
										ctx.draw(true)
										
										
										uni.canvasToTempFilePath({
											canvasId:"firstCanvas",
											success: function (res) {
												var tempFilePath = res.tempFilePath;
												that.mixImg = tempFilePath;
												uni.hideLoading()
											}
										})
									}
								})
						    }
						})
						
						/* uni.getImageInfo({
							src:"../../../static/vip-card-bg.png",
							success(res) {
								ctx.drawImage(res.path,0,0,100,100)
								ctx.draw(true)
						    }
						}) */
						ctx.save(); 
					}else{
						that.$api.msg(d.msg);
					}
				})
			}
		}
	}
</script>

<style>
</style>
